<script>
import {changeStatus} from "@/api/container";
import {ROLE_FIRST_LEG, ROLE_INBOUND_SORTING} from "@/utils/admin";

export default {
  name: "ChangeContainerStatusBtn",
  props: {
    data: {
      type: Object,
      required: true,
    }
  },
  computed: {
    btnText(){
      const obj = {
        wait_customs_declaration: '确认已报关',
        wait_shipment: '确认已装货',
        wait_customs_clearance: '确认已清关',
        wait_receive: '确认已接收',
        wait_sorting: '确认已分拣',
      }
      return obj[this.data.status]
    },
    nextStatus(){
      const index = this.statusArr.indexOf(this.data.status)
      if(index === -1 || index === this.statusArr.length - 1){
        return ''
      }
      return this.statusArr[index + 1]
    }
  },
  data(){
    const statusArr1 = [
      'wait_customs_declaration', // 待报关
      'wait_shipment', // 待装货
      'wait_customs_clearance', // 待清关
      'wait_receive', // 待海外接受
    ];

    const statusArr2 = [
      'wait_receive', // 待海外接受
      'wait_sorting', // 待分拣
    ];
    let statusArr = [];
    if(this.$store.getters.roles.includes(ROLE_FIRST_LEG)){
      statusArr.push(...statusArr1)
    }else if(this.$store.getters.roles.includes(ROLE_INBOUND_SORTING)){
      statusArr.push(...statusArr2)
    }else if(this.$store.getters.roles.includes('admin')){
      statusArr.push(...statusArr1)
      statusArr.push(...statusArr2)
    }


    return {
      statusArr: statusArr,
      loading: false,
    }
  },
  methods: {
    changeStatus(){
      const data = {
        id: this.data.id,
        status: this.nextStatus
      }
      this.loading = true
      changeStatus(data)
        .then(res=>{
          this.loading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.$emit('changeRow')
          }
        })
    },
  }
}
</script>

<template>
  <el-button @click="changeStatus" v-if="nextStatus" :loading="loading" type="primary">{{btnText}}</el-button>
</template>

<style scoped lang="scss">

</style>
